<script setup lang="ts">
import { ref, onMounted, watch } from "vue"; //导入vue函数
import type { Category } from "@/model"; //导入自定义数据类型
import { getCategoryList } from "@/api"; //导入axio接口

//当前分类编号
const params = defineProps(["id"]);

//当前分类数据对象
const category = ref<Category>();

//获得当前分类
async function getCategory() {
  const res = await getCategoryList();
  category.value = res.data.data.filter(
    (value: Category) => value.id == params.id
  )[0];
}

//页面组件加载完成
onMounted(() => {
  getCategory();
});

//侦听params参数变化
watch(params, () => {
  getCategory();
});
</script>

<template>
  <section>
    <div><RouterLink to="/">首页</RouterLink> &raquo; {{ category?.name }}</div>
  </section>
</template>

<style scoped>
section {
  background-color: #f5f5f5;
}
section > div {
  color: #666666;
  width: 1200px;
  height: 70px;
  line-height: 70px;
  margin: 0px auto;
}
section a {
  color: #333333;
  text-decoration: none;
}
section a:hover {
  color: #4799f6;
}
</style>
